<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>xeokit Example</title>
    <link href="../css/pageStyle.css" rel="stylesheet"/>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/js/all.min.js"></script>
</head>
<body>
<input type="checkbox" id="info-button"/>
<label for="info-button" class="info-button"><i class="far fa-3x fa-question-circle"></i></label>
<canvas id="myCanvas"></canvas>
<div><a href="javascript:flip()">SectionPlanesPlugin.flipSectionPlanes()</a></div>
<div class="slideout-sidebar">
    <img class="info-icon" src="../../../assets/images/section_plane_icon.png"/>
    <h1>SectionPlanesPlugin </h1>
    <h2>Flipping slicing direction with flipSectionPlanes()</h2>
    <h3>Stats</h3>
    <ul>
        <li>
            <div id="time">Loading JavaScript modules...</div>
        </li>
    </ul>
    <h3>Components used</h3>
    <ul>
        <li>
            <a href="../../docs/class/src/viewer/Viewer.js~Viewer.html"
               target="_other">Viewer</a>
        </li>
        <li>
            <a href="../../docs/class/src/plugins/XKTLoaderPlugin/XKTLoaderPlugin.js~XKTLoaderPlugin.html"
               target="_other">XKTLoaderPlugin</a>
        </li>
        <li>
            <a href="../../docs/class/src/plugins/SectionPlanesPlugin/SectionPlanesPlugin.js~SectionPlanesPlugin.html"
               target="_other">SectionPlanesPlugin</a>
        </li>
    </ul>
    <h3>Resources</h3>
    <ul>
        <li>
            <a href="http://openifcmodel.cs.auckland.ac.nz/Model/Details/274"
               target="_other">Model source</a>
        </li>
    </ul>
</div>
</body>

<script type="module">

    //------------------------------------------------------------------------------------------------------------------
    // Import the modules we need for this example
    //------------------------------------------------------------------------------------------------------------------

    import {Viewer, math, SectionPlanesPlugin, XKTLoaderPlugin} from "../../dist/xeokit-sdk.min.es.js";

    //------------------------------------------------------------------------------------------------------------------
    // Create a Viewer and arrange the camera
    //------------------------------------------------------------------------------------------------------------------

    const viewer = new Viewer({
        canvasId: "myCanvas",
        transparent: true
    });

    viewer.camera.eye = [-2.341298674548419, 22.43987089731119, 7.236688436028655];
    viewer.camera.look = [4.399999999999963, 3.7240000000000606, 8.899000000000006];
    viewer.camera.up = [0.9102954845584759, 0.34781746407929504, 0.22446635042673466];

    const cameraControl = viewer.cameraControl;
    cameraControl.navMode = "orbit";
    cameraControl.followPointer = true;

    //----------------------------------------------------------------------------------------------------------------------
    // Create a xeokit loader plugin, load a model, fit to view
    //----------------------------------------------------------------------------------------------------------------------

    const xktLoader = new XKTLoaderPlugin(viewer);

    var t0 = performance.now();

    document.getElementById("time").innerHTML = "Loading model...";

    const sceneModel = xktLoader.load({
        id: "myModel",
        src: "../../assets/models/xkt/v10/glTF-Embedded/Duplex_A_20110505.glTFEmbedded.xkt",
        edges: true
    });

    const sectionPlanes = new SectionPlanesPlugin(viewer);

    sceneModel.on("loaded", () => {
        var t1 = performance.now();
        document.getElementById("time").innerHTML = "Model loaded in " + Math.floor(t1 - t0) / 1000.0 + " seconds<br>Objects: " + sceneModel.numEntities;

        //------------------------------------------------------------------------------------------------------------------
        // Create a moving SectionPlane, that moves through the table models
        //------------------------------------------------------------------------------------------------------------------

        const sectionPlane = sectionPlanes.createSectionPlane({
            id: "mySectionPlane",

            pos: viewer.scene.center,
            dir: math.normalizeVec3([1.0, 0.01, 1])
        });

        sectionPlanes.showControl(sectionPlane.id);

        // let i = 0;
        // viewer.scene.on("tick", () => {
        //     sectionPlane.pos = [sectionPlane.pos[0] + i, sectionPlane.pos[1], sectionPlane.pos[2] + i];
        //     i += 0.001;
        // });
        //
        window.viewer = viewer;

    });

    window.flip = function () {
        sectionPlanes.flipSectionPlanes();
    }

</script>
</html>